<script setup lang='ts'>
import { onMounted, ref, watch } from "vue";
import { getDetailsMaterial, getRandomDetailsMaterial, Live, Liveinitialization, collect, collectinitialization, download } from "../api/api";
import detailsPageimg from "../components/detailsPageimg.vue";
import detailsPageData from "../components/detailsPageData.vue";
import content from "../components/content.vue";
import indexBar from "../components/indexBar.vue";
import thisData from "../components/pc/thisData.vue";
import { useRoute, useRouter } from "vue-router";
import { showToast, showFailToast } from 'vant';
import { page } from "../utils/reload";

const { loading, onRefresh } = page()
const route = useRoute()
const router = useRouter()
const title = ref()
const data = ref([])
const iconColor = ref('')
const randomData = ref()
const iconColorY = ref()
const _id = ref()
const url = ref()
//获取数据
const axiosData = async (e: any) => {
    const res = await getDetailsMaterial({ _id: e })
    url.value = res.data.data.imgdomainUrl
    
    const resData = await getRandomDetailsMaterial()
    randomData.value = resData.data.data
    data.value.push(res.data.data as never)
    title.value = res.data.data.name
}
//初始化
onMounted(() => {
    _id.value = route.query.type
    axiosData(_id.value)
    initializationL(_id.value)
    initializationC(_id.value)
})
//监视路由
watch(() => route.query.type, async (newValue) => {
    data.value = []
    axiosData(newValue)
})
const onClickLeft = () => history.back();
//初始化点赞
const initializationL = async (id: string) => {
    const res = await Liveinitialization({ id, mail: localStorage.getItem('mail') as string })
    if (res.data.code === '200') return iconColor.value = 'red'
    iconColor.value = ''
};
//初始化收藏
const initializationC = async (id: string) => {
    const res = await collectinitialization({ id, mail: localStorage.getItem('mail') as string })
    if (res.data.code === '200') return iconColorY.value = 'yellow'
    iconColorY.value = ''
};
//点赞
const onClickIcon = async (id: string) => {
    const res = await Live({ id, mail: localStorage.getItem('mail') as string })
    console.log(res.data.code);

    if (res.data.code === '404') {
        localStorage.setItem('token', '')
        localStorage.setItem('mail', '')
        showFailToast('请先进行登录');
        router.push({ name: 'login' })
        return
    } else if (res.data.code === '200') {
        iconColor.value = 'red'
        showToast({
            message: '点赞成功',
            icon: 'like-o',
        });
        return
    }
    iconColor.value = ''
};
//收藏
const onClickIconY = async (id: string) => {
    const res = await collect({ id, mail: localStorage.getItem('mail') as string })
    if (res.data.code === '404') {
        localStorage.setItem('token', '')
        localStorage.setItem('mail', '')
        showFailToast('请先进行登录');
        router.push({ name: 'login' })
        return
    } else if (res.data.code === '200') {
        iconColorY.value = 'yellow'
        showToast({
            message: '收藏成功',
            icon: 'star-o',
        });
        return
    }
    iconColorY.value = ''
}
const onClickButton = async (_id: string) => {
    const res = await download({ id: _id, mail: localStorage.getItem('mail') as string })
    if (res.data.type === 'text/html') return showFailToast('下载失败,积分已用完，请充值积分')
    if (res.data.type === 'application/json') {
        localStorage.setItem('token', '')
        localStorage.setItem('mail', '')
        showFailToast('没登录或登录过期')
        router.push({ name: 'login' })
        return
    }
    const url = URL.createObjectURL(res.data)
    const a = document.createElement('a')
    a.href = url
    a.style.display = 'none'
    a.download = '素材'
    a.click()
    URL.revokeObjectURL(a.href)
    a.remove()
};
</script>

<template>
    <div class="m">
        <van-nav-bar fixed placeholder :title left-text="返回" color="black" left-arrow @click-left="onClickLeft">
        </van-nav-bar>
        <div class="conent">
            <van-pull-refresh v-model="loading" @refresh="onRefresh">
                <detailsPageimg :url></detailsPageimg>
                <detailsPageData :data="data"></detailsPageData>
                <div class="data">
                    <indexBar title="推荐分类">
                        <van-icon name="good-job" size="20" />
                    </indexBar>
                    <content :data="randomData"></content>
                </div>
            </van-pull-refresh>
        </div>
        <van-action-bar placeholder style="z-index: 10;">
            <van-action-bar-icon icon="like" text="点赞" :color="iconColor" @click="onClickIcon(_id)" />
            <van-action-bar-icon icon="star" text="收藏" :color="iconColorY" @click="onClickIconY(_id)" />
            <van-action-bar-button type="danger" text="立即下载" @click="onClickButton(_id)" />
        </van-action-bar>
    </div>
    <div class="pc">
        <thisData></thisData>
    </div>
</template>

<style scoped>
.conent {
    width: 100%;
    min-height: calc(100vh - 100px);
    background-color: #f8f8f9;
}

.data {
    background-color: white;
}

@media screen and (max-width:1024px) {
    .m {
        display: block;
    }

    .pc {
        display: none;
    }
}

@media screen and (min-width:1025px) {
    .m {
        display: none;
    }

    .pc {
        display: block;
    }
}
</style>